<template>
	<view class="container">
		<!-- <uni-nav-bar background-color="#2979ff" dark left-icon="back" :fixed="true" :border="false" title="单列表刷新"></uni-nav-bar> -->
		<uwo-nav-bar bgColor="#2979ff" :isBack="false">
			<template #content>首页</template>
		</uwo-nav-bar>
		<view class="uni-px-10 uni-py-10">
			<uni-grid :column="3" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in data" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff">
						<uni-icons type="image" :size="30" color="#777" />
						<text class="text">{{ item.name }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script setup>
/**
 * vue3doc
 */
import { onMounted, ref } from 'vue';

const data = ref([
	{
		name: '单列表刷新',
		url: '/pages/devloper/singleList/singleList'
	},
	{
		name: '多列表刷新',
		url: '/pages/devloper/multiList/multiList'
	},
	{
		name: '基础表单校验',
		url: '/pages/devloper/addForm/addForm'
	},
	{
		name: '表单预览',
		url: '/pages/devloper/formPreview/formPreview'
	},
	{
		name: '动态表单校验',
		url: '/pages/devloper/dynamicForm/dynamicForm'
	},
	{
		name: '任务详情',
		url: '/pages/devloper/taskDetail/taskDetail'
	},
	{
		name: '横屏的签名',
		url: '/pages/devloper/autograph/autograph'
	},
	{
		name: '微信公众号',
		url: '/pages/devloper/wxPage/wxPage'
	}
]);
/**
 * 点击宫格
 */
const change = (e) => {
	const index = e.detail.index;
	uni.navigateTo({
		url: data.value[index].url
	});
};
</script>

<style lang="scss" scoped>
.grid-item-box {
	flex: 1;
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}
.container {
}
</style>
